<template>
  <div class="stage">
    <h4>剧照图片</h4>
    <van-swipe
      class="my-swipe"
      @change="onChange"
      :height="160"
      :width="240"
      indicator-color="white"
      :show-indicators="false"
      
    >
      <van-swipe-item
        v-for="(item, index) in Detail.photos"
        :key="index"
      >
        <img :src="item" alt="暂无图片" title="剧照图片"/>
      </van-swipe-item>
      <template #indicator>
    <div class="custom-indicator">{{ current + 1 }}/{{total}}</div>
  </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "VueMovieStagePhoto",
  props: {
    Detail: {
      type: Array / Object,
    },
  },
  data() {
    return {current: 0,
    total:this.Detail.photos.length}
  },
  mounted() {},
  methods: {
     onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="less" scoped>
//指示点
.custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 2px 5px;
    border-radius: 8px 0 0 0px;
    font-size: 18px;
    background: #fff;
  }
//   剧照
.stage {
  background-color: #3b1b1a;
  padding: 5px;
  h4 {
    color:#fff;
    font-weight: normal;
    padding-left: 10px;
    padding-bottom: 5px;
  }
  .van-swipe {
      overflow: hidden;
    border-radius: 5px;
    margin: 10px 10px;
    .van-swipe-item{
      width: 320px;
      height: 180px;
    img {
      width: 96%;
      height: 100%;
    }
    }

  }
}
</style>